<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据库设计器</title>
    <script src="../../../../scripts/boot.js" type="text/javascript"></script>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            border: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .mini-mask-msg {
            cursor: no-drop !important;
        }
    </style>
</head>
<body>
	<!-- 数据表 -->
	<div class="mini-splitter" style="width: 100%;" id="sp"
	     onresize="resize" oncollapse="resize" onexpand="resize">
	    <div size="36%" showCollapseButton="true">
	    	<!-- 按钮你栏 -->
			<div class="mini-toolbar">
			    <a class="mini-button" iconCls="icon-add" enabled="true" onclick="onAddNode()" id="but_update">增加子表</a> 
			    <span class="separator"></span>
			    <a class="mini-button" iconCls="icon-remove" enabled="true" onclick="onRemoveNode()" id="but_remove">删除子表</a> 
			</div>
	    	<!-- showCheckBox="true"   onnodecheck = "onModularNodeselect" -->
	     	<div id="tableTreeGrid" class="mini-treegrid" showHeader='true' title="数据库列表"
	             style="width: 100%; height: 100%;" treeColumn="tableClassName" idField="tableId"
	             virtualScroll="true" parentField="pid" resultAsTree="false" checkRecursive="false" 
				 expandOnLoad="true" onselectionchanged="onNodeselectMo" oncellbeginedit="OnCellBeginEditTable" 
				 allowCellEdit="true" allowCellSelect="true" contextMenu="#gridMenu">
				 
	            <div property="columns">
	                <div type="indexcolumn"></div>
	                <div name="tableClassName" field="tableClassName" width="200" headerAlign="center" align="left">表名
	                	 <!-- <input property="editor" class="mini-textbox" style="width:100%;" /> -->
	                </div>
	                <div field="tableChClassName" width="100%" headerAlign="center" align="center">中文表名
	                	 <!-- <input property="editor" class="mini-textbox" style="width:100%;"/> -->
	                </div>
	                <div field="tableClassId" width="100%" headerAlign="center" align="center" visible="false">ID
	                	 <!-- <input property="editor" class="mini-textbox" style="width:100%;" /> -->
	                </div>
	                <div field="mTableId" width="100%" headerAlign="center" align="center">表类型</div>
	            </div>
	        </div>
	    </div>
	    <div showCollapseButton="true">
	    	<!-- 按钮你栏 -->
			<div class="mini-toolbar">
			    <a class="mini-button" iconCls="icon-add" enabled="true" onclick="onAddFiled()" id="but_update">新增字段</a> 
			    <span class="separator"></span>
			    <a class="mini-button" iconCls="icon-edit" enabled="true" onclick="onEditChField()" id="but_update">编辑字段</a> 
			    <span class="separator"></span>
			    <a class="mini-button" iconCls="icon-remove" enabled="true" onclick="onRemove()" id="but_remove">删除字段</a> 
			</div>
	    	<!--  checkRecursive属性是否联动选择节点 ondrawcell="ondrawcell" -->
	        <div id="filedTreegrid" class="mini-treegrid" showHeader='true' title="表字段"
	             style="width: 100%; height: 100%;" idField="filedId" treeColumn="field" showTreeIcon="false"
	             allowCellEdit="true" allowCellSelect="true" allowUnselect='true'
	             oncellbeginedit="OnCellBeginEdit" oncellcommitedit="OnCellCommitEdit">
	            <div property="columns">
	                <div type="indexcolumn"></div>
	                <div field="tableId"  headerAlign="center" align="center" visible="false">ID</div>
	                <div name="field" field="field" width="280" headerAlign="center" align="center">字段(英文)</div>
	                <div field="fieldCh" width="120" headerAlign="center" align="center">字段(中文)
	                	<!-- <input property="editor" class="mini-textbox" style="width:100%;"/> -->
	                </div>
	                <div field="type" width="100%" headerAlign="center" align="center">类型(英文)</div>
	                <!--<div field="fileTypeCh" width="100%" headerAlign="center" align="center">类型</div>-->
	                <!-- <div field="value2" width="100%" headerAlign="center" align="center">值</div> -->
	                <!--<div field="notNull" width="100%" headerAlign="center" align="center">是否可为空</div>-->
	                <div field="state" width="100%" headerAlign="center" align="center">是否系统预制</div>
	            </div>
	        </div>
	    </div>
	</div>
	<!-- 右键菜单：新增/编辑/删除字段 -->
	<ul id="gridMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">              
		<li name="add" iconCls="icon-add" onclick="onAddFiled">新增字段</li>
		<!-- <li name="edit" iconCls="icon-edit" onclick="onEdit">编辑节点</li>
		<li name="remove" iconCls="icon-remove" onclick="onRemove">删除节点</li> -->   
	</ul>
	<!-- 编辑中文字段 -->
	<div id="editWindow" class="mini-window" title="编辑字段" style="width:350px;" 
	    showModal="true" allowResize="true" allowDrag="true"
	    >
	    <div id="editform" class="form" >
	        <input class="mini-hidden" name="id"/>
	        <table style="width:100%;">
	            <tr>
	                <td style="width:80px;">字段(中文)：</td>
	                <td style="width:150px;"><input name="fieldCh" class="mini-textbox" selectOnFocus="true"/></td>
	            </tr>
	            <tr>
	                <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
	                    <a class="Update_Button" href="javascript:updateChFieldName()">确定</a> 
	                    <a class="Cancel_Button" href="javascript:cancelEditClass()">取消</a>
	                </td>                
            	</tr>
	        </table>
	    </div>
	</div>
	
	
	
<script src="../../js/ColumnsMenu.js"></script>
<script src="js/sqlDesign.js" type="text/javascript"></script>
</body>
</html>
